---
title: "Accessibility Checker Rule Help: WCAG21_Input_Autocomplete"
---
import "../../../styles/ToolHelp.scss"
import { CodeSnippet, Tag } from "carbon-components-react";

<div className="toolHelp">
<Row>
<Column colLg={5} colMd={3} colSm={4} className="toolLeft">

### Who does this affect?

 * Blind people using screen readers
 * People with tremor or other movement disorders
 * People with memory limitations
 * People with cognitive limitations

### Why is this important?

Using an appropriate autocomplete token for a form field that collects user information makes the input’s purpose programmatically determinable. This helps user agents and assistive technologies to present the programmatically determined purpose of the inputs to users in different modalities. The `autocomplete` attribute can also assist with pre-populating form fields with values the user has previously input.

</Column>
<Column colLg={11} colMd={5} colSm={4} className="toolMain">

<div id="locLevel"></div>

### The `autocomplete` attribute's token(s) are not appropriate for the input form field
The `autocomplete` attribute's token(s) must be appropriate for the input form field

[IBM 1.3.5 Identify Input Purpose](https://www.ibm.com/able/guidelines/ci162/identify_input_purpose_71.html)

<div id="locSnippet"></div>

### What to do

 * If the `autocomplete` attribute is appropriate for this input element, correct the `autocomplete`’s token(s) to use the well-defined fixed values, in the correct order for the correct input purpose as described in the [HTML 5.2 specification section - Autofilling form controls: the autocomplete attribute](https://www.w3.org/TR/html52/sec-forms.html#autofilling-form-controls-the-autocomplete-attribute);
 * OR, if the `autocomplete` attribute is used to describe a "custom" taxonomy rather than the tokens described in the HTML 5.2 specification, manually validate the custom taxonomy.

Correct example:

<CodeSnippet type="multi" light={true}>&lt;form method="post" action="step2"&gt;
 &lt;div&gt;
   &lt;label for="fname"&gt;First Name:&lt;/label&gt;
  &lt;input id="fname" type="text" autocomplete="given-name" ... /&gt;
 &lt;/div&gt;
 &lt;div&gt;
    &lt;label for="lname"&gt;Last Name:&lt;/label&gt;
  &lt;input id="lname" type="text" autocomplete="family-name" ... /&gt;
 &lt;/div&gt;
 &lt;div&gt;
    &lt;label for="cc-num"&gt;Credit card number:&lt;/label&gt;
    &lt;input type="text" id="cc-num" autocomplete="cc-number"/&gt;
 &lt;/div&gt;
 &lt;div&gt;
    &lt;label for="exp-date"&gt;Expiry Date:&lt;/label&gt;
    &lt;input type="month" id="exp-date" autocomplete="cc-exp"/&gt;
 &lt;/div&gt;
 &lt;div&gt;
    &lt;input type="submit" value="Continue..."&gt;
 &lt;/div&gt;
&lt;/form&gt;</CodeSnippet>

Example code includes material copied from or derived from [Using HTML5 Autocomplete attributes, technique H98](https://www.w3.org/WAI/WCAG21/Techniques/html/H98). Copyright © 2017-2018 W3C® (MIT, ERCIM, Keio, Beihang)


</Column>
</Row>
</div>

export default ({ children, _frontmatter }) => (<React.Fragment>{children}</React.Fragment>)